<template>
  <div class="app-container">
    <div v-if="changePage" class="main-page">
      <page-tools>
        <template #after>
          <el-button type="primary" plain size="small" @click="changePage=false">创建考试</el-button>
        </template>
        <template #content>
          <div>
            <el-row :gutter="15">
              <el-form
                ref="elForm"
                :model="formData"
                size="medium"
                label-width="100px"
              >
                <el-col :span="6">
                  <el-form-item label="考试名称" prop="exam_name">
                    <el-input
                      v-model="formData.exam_name"
                      placeholder="请输入考试名称"
                      clearable
                      :style="{ width: '100%' }"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="归属学科" prop="subject_id">
                    <el-select
                      v-model="formData.subject_id"
                      placeholder="请选择归属学科"
                      clearable
                      :style="{ width: '100%' }"
                      @change="changeSubject"
                      @clear="clearSubject"
                    >
                      <el-option
                        v-for="item in treeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item></el-col>
                <el-col :span="6">
                  <el-form-item label="归属目录" prop="directory_id">
                    <el-select
                      ref="child"
                      v-model="formData.directory_id"
                      placeholder="请选择归属目录"
                      clearable
                      :style="{ width: '100%' }"
                    >
                      <el-option
                        v-for="item in childrenList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="考试类型" prop="exam_type">
                    <el-select
                      v-model="formData.exam_type"
                      placeholder="请选择考试类型"
                      clearable
                      :style="{ width: '100%' }"
                    >
                      <el-option label="阶段考试" :value="1" />
                      <el-option label="综合考试" :value="2" />

                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="锁屏方式" prop="lock_screen">
                    <el-select
                      v-model="formData.lock_screen"
                      placeholder="请选择锁屏方式"
                      clearable
                      :style="{ width: '100%' }"
                    >
                      <el-option label="锁屏" :value="2" />
                      <el-option label="不锁屏" :value="1" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="创建人" prop="create_name">
                    <el-input
                      v-model="formData.create_name"
                      placeholder="请输入创建人"
                      clearable
                      :style="{ width: '100%' }"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="创建时间" prop="create_time">
                    <el-date-picker
                      v-model="formData.create_time"
                      type="daterange"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      :style="{ width: '100%' }"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      range-separator="至"
                      clearable
                    />
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item size="large">
                    <el-button type="primary" plain size="small" @click="getExamList()">搜索</el-button>
                    <el-button size="small" @click="resetForm">重置</el-button>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
          </div>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="序号" width="80" type="index" align="center" />
            <el-table-column label="考试信息" header-align="center">
              <template slot-scope="{row}">
                <!-- {{ row }} -->
                <el-descriptions class="margin-top" :column="4">
                  <el-descriptions-item label="考试ID">{{ row.id }}</el-descriptions-item>
                  <el-descriptions-item label="考试名称">{{ row.exam_name }}</el-descriptions-item>
                  <el-descriptions-item label="归属学科">{{ row.subject_name }}</el-descriptions-item>
                  <el-descriptions-item label="归属目录">{{ row.directory_name }}</el-descriptions-item>
                  <el-descriptions-item label="考试类型">{{ row.exam_type===1?'阶段测试':'综合测试' }}</el-descriptions-item>
                  <el-descriptions-item label="锁屏方式">{{ row.lock_screen===1?'不锁屏':'锁屏' }}</el-descriptions-item>
                  <el-descriptions-item label="创建人">{{ row.create_name }}</el-descriptions-item>
                  <el-descriptions-item label="创建时间">{{ row.created_at | formatTime }}</el-descriptions-item>
                  <el-descriptions-item label="试卷信息">
                    <el-tag size="small" @click="showExam(row)">点击查看</el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="推送班级信息">
                    <el-tag v-if="row.exam_bind_class.length" size="small" @click="showClass(row)">点击查看</el-tag>
                    <span v-else>暂无</span>
                  </el-descriptions-item>
                </el-descriptions>
              </template>

            </el-table-column>
            <el-table-column label="操作" width="160" align="center">
              <template slot-scope="{row}">
                <el-button type="warning" icon="el-icon-connection" circle size="small" @click="pushClass(row)" />
                <el-button v-if="!row.exam_bind_class.length" type="danger" icon="el-icon-delete" circle size="small" @click="delExam(row)" />
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <el-pagination
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout=" ->, sizes, prev, pager, next, jumper"
            :total="total"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </template>
      </page-tools>

      <!-- 试卷弹框 -->
      <el-dialog
        title="考试试卷信息"
        :visible.sync="examShow"
        width="30%"
      >
        <span>主考试卷: <span class="main_paper_name"> {{ main_paper_name }}</span></span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="examShow = false">关 闭</el-button>
        </span>
      </el-dialog>
      <!-- 班级弹框 -->
      <exam-class ref="examClass" :bind-class-list="classList" />
      <!-- 推送班级弹框 -->
      <exam-push ref="pushClass" :class-list="classList" @pushClass="pushClass" />
    </div>
    <!-- 新增考试 -->
    <add-exam v-else :subject-list="treeList" />
    <!-- <ya-hui v-else /> -->
  </div>

</template>

<script>
import { getExamList, gettreeList, delExam } from '@/api/exam/exam.js'
import ExamClass from './components/exam-class.vue'
import ExamPush from './components/exam-push.vue'
import AddExam from './components/add-exam.vue'
// import YaHui from './components/ya-hui.vue'
export default {
  name: 'Exam',
  components: { ExamClass, ExamPush, AddExam }, // AddExam, YaHui
  props: [],
  data() {
    return {
      changePage: true, // 切换新增页面和主页
      examShow: false, // 试卷弹框显示隐藏
      classShow: true, // 班级弹框显示隐藏
      main_paper_name: '',
      classList: [], // 已绑定的班级数据
      pushClassList: [], // 所有的班级数据
      treeList: [], // 归属学科树结构数据
      childrenList: [], // 归属目录树结构数据
      formData: {
        exam_name: '',
        subject_id: '',
        directory_id: '',
        exam_type: '',
        lock_screen: '',
        create_name: '',
        create_time: '',
        page: 1,
        limit: 10
      },
      tableData: [], // 表格数据
      total: 0,
      bindClass: []// 试卷已绑定的班级数据
    }
  },

  watch: {},
  created() {
    this.getExamList()
    this.gettreeList()
  },
  mounted() {},
  methods: {
    // 重置按钮
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.getExamList()
    },
    // 获取考试信息数据
    async getExamList() {
      const { list, total } = await getExamList(this.formData)
      // console.log(list, total, '考试的数据')
      this.total = total
      this.tableData = list
    },

    // 每页条数变化
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.formData.limit = val
      this.getExamList()
    },
    // 页码变化
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.formData.page = val
      this.getExamList()
    },
    // 打开考试弹框
    showExam(row) {
      console.log(row.exam_bind_class.length)
      this.examShow = true
      this.main_paper_name = row.main_paper_name
    },
    // 打开班级弹框
    showClass(row) {
      // console.log(row.exam_bind_class)
      if (row.exam_bind_class.length) {
        this.classList = row.exam_bind_class
      }
      this.$refs.examClass.dialogTableVisible = true
      console.log(row)
      console.log(this.classList, '班级数据')
    },
    // 获取树结构数据
    async  gettreeList() {
      const res = await gettreeList()
      // console.log(res, '树结构数据')
      this.treeList = res
    },
    // 选中科目选择框
    changeSubject(id) {
      this.treeList.forEach((item) => {
        if (item.id === id) {
          // console.log(item, '每一项')
          this.childrenList = item.children
        }
      })
      // console.log(this.childrenList, '子级')
    },
    // 清空归属学科,归属目录联动清空
    clearSubject() {
      // 清除隔壁的下拉框的内容,实现联动清空
      delete this.formData.directory_id
      this.childrenList = []
      // 重新刷新页面
      this.getExamList()
    },
    // 删除试卷
    async  delExam(row) {
      // console.log(row)
      await this.$confirm('确定删除吗,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await delExam(row.id)
        console.log(res)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })

      this.getExamList()
    },
    // 点击推送班级按钮
    async pushClass(row) {
      // 获取所有班级信息
      console.log(row)
      // const res = await getClassList({
      //   state: 1,
      //   subject_id: row.subject_id
      // })
      // console.log(res)
      // this.pushClassList = res.list
      // if (row.exam_bind_class.length) {
      this.$refs.pushClass.getList(row)
      // 打开弹框
      this.$refs.pushClass.dialogClassVisible = true
      // }
      // else {
      //   return this.$message.warning('当前未绑定班级')
      // }
    }

  }
}
</script>
<style lang="scss" scoped>
::v-deep .main_paper_name{
  color: #66b1ff;
}
</style>
